<template>
  <div>
    <yt-crud
      v-bind="options"
      ref="crudRef"
      @onLoad="getData"
      :fun-props="{
        exportBtn: false,
        delBtn: false,
      }"
      :table-props="{
        delBtn: true,
        viewBtn: true,
        editBtn: true,
        menuSlot: true,
        menuWidth: 300,
      }"
      :form-props="{
        labelWidth: '180px',
      }"
      :loading="state.loading"
      :total="state.total"
      v-model:page="state.page"
      v-model:query="state.query"
      @delFun="handleDelete"
      @saveFun="onSave"
      @handle-add="handleAdd"
      @handle-update="handleUpdate"
      @openBeforeFun="openBeforeFun"
    >
      <template #rightToolbar></template>
      <template #menuSlot></template>

      <template #period="scope:any">
        <DictTag :options="PriceParkPeriodEnum" :value="scope.row.period" />
      </template>

      <template #status="scope:any">
        <el-switch v-model="scope.row.status" active-value="Enabled" inactive-value="Disabled" @change="handleStatusChange(scope.row)" />
      </template>
    </yt-crud>
  </div>
</template>

<script lang="ts" setup>
import { IColumn } from '@/components/common/types/tableCommon'
import YtCrud from '@/components/common/yt-crud.vue'
import {PriceVO} from '@/api/business/priceCharge/types'
import {
  priceParkList,
  priceParkSave,
  priceParkDelete,
  priceParkBatchDelete,
  changeStatus
} from '@/api/business/pricePark'
import {ComponentInternalInstance} from 'vue'
import {useI18n} from 'vue-i18n'
const { t } = useI18n()

const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { EnableStatusEnum, PriceParkPeriodEnum } = toRefs<any>(proxy?.useEnum('enable_status_enum', 'price_park_period_enum'))

const formRef = ref()

const state = reactive({
  page: {
    pageSize: 12,
    pageNum: 1,
  },
  total: 0,
  loading: false,
  query: {},
})

const column = ref<IColumn[]>([
  {
    label: t('business.pricePark.name'),
    key: 'name',
    searchLabelWidth: 120,
    search: true,
    formHide: false,
    colSpan: 22,
    rules: [{ required: true, message: t('business.pricePark.validator.name') }],
  },
  {
    label: t('business.pricePark.beforeFreeMinute'),
    key: 'beforeFreeMinute',
    type: 'number',
    align: 'center',
    search: false,
    formHide: false,

    slot: false,
    rules: [{ required: true, message: t('business.pricePark.validator.beforeFreeMinute') }],
    componentProps: {
      precision: 0,
      step: 10,
      min: 1,
      max: 1000,
      style: 'width:250px',
    },
  },
  {
    label: t('business.pricePark.afterFreeMinute'),
    key: 'afterFreeMinute',
    type: 'number',
    align: 'center',
    search: false,
    formHide: false,
    slot: false,
    rules: [{ required: true, message: t('business.pricePark.validator.afterFreeMinute') }],
    componentProps: {
      precision: 0,
      step: 10,
      min: 1,
      max: 1000,
      style: 'width:250px',
    },
  },
  {
    label: t('business.pricePark.period'),
    key: 'period',
    type: 'radio',
    componentProps: {
      options: PriceParkPeriodEnum,
    },
    rules: [{ required: true, message: t('business.pricePark.validator.period') }],
    search: false,
    formHide: false,
    slot: true,
  },
  {
    label: t('business.pricePark.maxAmount'),
    key: 'maxAmount',
    type: 'number',
    rules: [{ required: true, message: t('business.pricePark.validator.maxAmount') }],
    componentProps: {
      precision: 2,
      step: 1,
      min: 0.5,
      max: 100,
      style: 'width:250px',
    },
    search: false,
    formHide: false,
    slot: false,
  },
  {
    label: t('business.pricePark.price'),
    key: 'price',
    type: 'number',
    rules: [{ required: true, message: t('business.pricePark.validator.price') }],
    componentProps: {
      precision: 2,
      step: 1,
      min: 0.5,
      max: 100,
      style: 'width:250px',
    },
    search: false,
    formHide: false,
    slot: false,
  },
  {
    label: t('business.pricePark.status'),
    key: 'status',
    type: 'select',
    componentProps: {
      options: EnableStatusEnum,
    },
    search: false,
    formHide: true,
    slot: true,
  },
  {
    label: t('crud.table.column.createTime'),
    key: 'createTime',
    tableWidth: 180,
    sortable: true,
    type: 'date',
    formHide: true,
  },
])
const crudRef = ref()
const data = ref<any[]>([])
const getData = () => {
  state.loading = true
  priceParkList({
    ...state.page,
    ...state.query,
  })
    .then((res) => {
      data.value = res.data.rows
      state.total = res.data.total
    })
    .finally(() => {
      state.loading = false
    })
}


// 保存数据
const onSave = async ({ data, cancel }: any) => {
  state.loading = true
  await priceParkSave(toRaw(data))
  ElMessage.success(t('operate.success'))
  state.loading = false
  cancel()
  getData()
}

// 弹窗前置操作
const openBeforeFun = ({ type}) => {
  if (type === 'add') { /* empty */ } else if (type === 'update') { /* empty */ }
}

//价格添加
const handleAdd = async () => {
  formRef.value.openDialog()
}

//价格修改
const handleUpdate = async (row: PriceVO) => {
  formRef.value.openDialog(row)
}

/** 状态修改  */
const handleStatusChange = async (row: any) => {
  if(!row.id)  return
  try {
    await proxy?.$modal.confirm(row.status === 'Enabled' ? t('crud.action.tooltip.enable') : t('crud.action.tooltip.disabled'))
    await changeStatus(row.id, row.status)
    ElMessage.success(t('operate.tooltip.success'))
    getData()
  } catch (err) {
    row.status = row.status === 'Enabled' ? 'Disabled' : 'Enabled'
  }
}

// 删除
const handleDelete = async (row: any) => {
  state.loading = true
  if (row instanceof Array) {
    await priceParkBatchDelete(row.map((m) => m.id))
  } else {
    await priceParkDelete(row.id)
  }
  ElMessage.success(t('operate.tooltip.success'))
  state.loading = false
  getData()
}

const handleSuccess = ()=>{
  getData()
}

const options = reactive({
  ref: 'crudRef',
  data,
  column,
})
</script>
